<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生点名系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 头部标题 -->
        <header class="header">
            <h1 class="title">✨ 学生点名系统 ✨</h1>
            <p class="subtitle">让点名变得更有趣</p>
        </header>

        <!-- 控制面板 -->
        <div class="control-panel">
            <div class="file-operations">
                <input type="file" id="fileInput" accept=".xlsx,.xls" style="display: none;">
                <button class="btn btn-import" onclick="controller.importStudents()">
                    📁 导入名单
                </button>
                <button class="btn btn-export" onclick="controller.exportStudents()">
                    💾 导出名单
                </button>
            </div>
            
            <div class="roll-controls">
                <button class="btn btn-start" id="startBtn" onclick="controller.startRoll()">
                    🎯 开始点名
                </button>
                <button class="btn btn-stop" id="stopBtn" onclick="controller.stopRoll()" disabled>
                    ⏹️ 停止
                </button>
                <button class="btn btn-reset" onclick="controller.resetRoll()">
                    🔄 重置
                </button>
            </div>
        </div>

        <!-- 3D球形展示区域 -->
        <div class="sphere-container">
            <div id="threejs-container"></div>
            <div class="selected-student" id="selectedStudent">
                <div class="student-name"></div>
            </div>
        </div>

        <!-- 学生列表 -->
        <div class="student-list">
            <h3>📋 学生名单</h3>
            <div class="student-count">总计：<span id="studentCount">0</span> 人</div>
            <div class="students-grid" id="studentsGrid">
                <!-- 学生卡片将在这里动态生成 -->
            </div>
        </div>
    </div>

    <script src="js/model.js"></script>
    <script src="js/view.js"></script>
    <script src="js/controller.js"></script>
    <script src="js/app.js"></script>
</body>
</html>